<!--templates-->
<div class="animated fadeIn" >
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <i class="fa fa-align-justify"></i> 菜单列表
                </div>
                <div class="card-body">
                    <div class=" form-horizontal">
                        <div class="row">
                            <div class="col-md-3">
                                <table class="layui-table" id="moduleTable"  lay-filter="module"></table><!--lay-skin="nob"-->
                            </div>
                            <div class="col-md-9" style="float: right">
                                <div class="row">
                                    <a shiro:hasPermission="sys:menu:add" class="opreate-btn  layui-btn layui-btn-sm" id="addbtn" href="#"><i class="icon-plus"></i>新增</a>
                                    <a shiro:hasPermission="sys:menu:edit" class="opreate-btn layui-btn layui-btn-sm" id="editbtn" href="#"><i class="icon-plus"></i>修改</a>
                                    <a shiro:hasPermission="sys:menu:delete"  class="opreate-btn layui-btn layui-btn-sm layui-btn-danger"  id="deletebtn" href="#"  ><i class="icon-close"></i>删除</a>
                                </div>
                                <table class="layui-table table-responsive-sm" id="menuTable" lay-filter="menu"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--/.row-->
        </div>
    </div>
</div>

<!--js-->
<script th:inline="javascript">

    var checkedMudleId;
    /*<![CDATA[*/
    var checkedtreegrid=/*[[${pageTitle}]]*/;//取值
    /*]]>*/

    layui.config({
        base: '../lib/layui/layuiextend/treegrid/'
    }).use(['laytpl', 'treegrid',"table"], function () {
        var laytpl = layui.laytpl,table=layui.table,
                treegrid = layui.treegrid;
        treegrid.config.render = function (viewid, data) {
            var view = document.getElementById(viewid).innerHTML;
            return laytpl(view).render(data) || '';
        };

        table.render({
            elem: '#moduleTable'
            ,url:'/api/sys/module/getModuleForPaging'
            ,page: false
            ,cols: [[
                {field:'name',title: '模块名称',event: 'setName',width:230}
            ]],
            response: {
                countName: 'total',
                dataName: 'rows'
            },
            done: function(res, curr, count) {
                if (res.rows.length>0) {
                    if(checkedMudleId==null) {
                        checkedMudleId=res.rows[0].id;
                    }
                    getJSON("/api/sys/menu/getMenuForPaging?moduleId=" + checkedMudleId)
                            .catch(error => {

                            }).then(value => {
                        var rows=JSON.parse(value);
                        checkedtreegrid=treegrid.createNew({
                            elem: 'menuTable',
                            view: 'menuView',
                            data: {rows: rows},
                            id: 'id',
                            root: "-1",
                            parentid: 'parentId',
                            singleSelect: true
                        });
                        checkedtreegrid.build();
                    })
                }
            }
        });

        table.on('tool(module)', function(obj){
            debugger;
            var data = obj.data;
            var event=obj.event;
            if(event=="setName"){
                checkedMudleId=data.id;
                getJSON("/api/sys/menu/getMenuForPaging?moduleId="+checkedMudleId)
                        .catch( error => {

                        }).then( value => {
                    debugger;
                    var rows=JSON.parse(value);
                    checkedtreegrid=treegrid.createNew({
                        elem: 'menuTable',
                        view: 'menuView',
                        data: {rows: rows},
                        id: 'id',
                        root: "-1",
                        parentid: 'parentId',
                        singleSelect: true
                    });
                    checkedtreegrid.build();
                })
            }
        });

        $('#deletebtn').on('click', function(){
            var row =checkedtreegrid.selectRow();
            if(row==null){
                layer.alert("请选择一条记录!", {icon: 0});
            }else {
                if(row.isLeaf=="1") {
                    var menuid=row.id;
                    layer.alert( '请确认是否删除该菜单!',{
                        icon: 3
                        ,btn: ['确认']
                        ,yes: function(index) {
                            layer.close(index);
                            postJSON("/api/sys/menu/delete", menuid)
                                    .catch(error => {

                                    })
                                    .then(value => {
                                        var result=JSON.parse(value);
                                        if (result == true) {
                                            layer.alert('该菜单删除成功!', {
                                                icon: 6, btn: ['确认'], yes: function (index) {
                                                    layer.close(index);
                                                    getJSON("/api/sys/menu/getMenuForPaging?moduleId=" + checkedMudleId)
                                                            .catch(error => {

                                                            }).then(value => {
                                                        var rows=JSON.parse(value);
                                                        checkedtreegrid=treegrid.createNew({
                                                            elem: 'menuTable',
                                                            view: 'menuView',
                                                            data: {rows: rows},
                                                            id: 'id',
                                                            root: "-1",
                                                            parentid: 'parentId',
                                                            singleSelect: true
                                                        });
                                                        checkedtreegrid.build();
                                                    })
                                                }
                                            });
                                        } else {
                                            layer.alert("该菜单删除失败!", {icon: 2});
                                        }
                                    });
                        }})
                }else{
                    layer.alert("该条记录非叶子节点，不能删除!", {icon: 2});
                }
            }
        });

        $('#addbtn').on('click', function(){
            setUpUrl("sys/menu/getListPage@sys/menu/addPage?moduleId="+checkedMudleId);
        });

        $('#editbtn').on('click', function(){
            var row =checkedtreegrid.selectRow();
            if(row==null){
                layer.alert("请选择一条记录!", {icon: 0});
            }else {
                setUpUrl("sys/menu/getListPage@sys/menu/editPage?menuId=" + row.id);
            }
        });

    });

</script>
<!--模板 js start-->
<script id="menuView" type="text/html">
    <table class="layui-table">
        <thead>
        <tr>
            <th>菜单名称</th>
            <th>菜单图标</th>
            <th>菜单描述</th>
            <th>是否展示</th>
            <th>业务权限</th>
            <th>访问路径</th>
        </tr>
        </thead>
        <tbody>
        {{# layui.each(d.rows,function(index,r){ }}
        <tr>
            <td><input type="checkbox" />{{r.name}}</td>
            <td><i class="{{r.icon}}"></i></td>
            <td>{{r.description}}</td>
            <td>{{#  if(r.ifShow == '0'){ }}
                不展示
                {{#  } else { }}
                展示
                {{#  } }}</td>
            <td>{{r.permission}}</td>
            <td>{{r.url}}</td>
        </tr>
        {{# }); }}
        </tbody>
    </table>
</script>
<!--模板 end-->
<!--css-->
<style type="text/css">
    .opreate-btn
    {
        width: 60px;
        margin:0 0 10px 15px;
        text-decoration : none;
    }
</style>